<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2022-10-11 10:45:31
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2022-10-14 14:46:58
-->
<template>
  <div>
    <h3>基础功能</h3>
    <virtual-list
      class="list-dynamic scroll-touch"
      :data-key="'id'"
      :data-sources="items"
      :data-component="itemComponent"
      :estimate-size="50"
      :item-class="'list-item-dynamic'"
    />
  </div>
</template>

<script>
import Item1 from './Item1.vue'
import VirtualList from 'vue-virtual-scroll-list'

const TOTAL_COUNT = 500
const DataItems = []
let count = TOTAL_COUNT
while (count--) {
  const index = TOTAL_COUNT - count
  DataItems.push({
    index,
    name: `张三`,
    id: index,
    desc: `学生`
  })
}
export default {
  name: '',
  data() {
    return { items: DataItems, itemComponent: Item1 }
  },
  components: { VirtualList },
  methods: {}
}
</script>

<style lang="less" scoped>
.list-dynamic {
  width: 100%;
  height: 500px;
  border: 2px solid;
  border-radius: 3px;
  overflow-y: auto;
  border-color: dimgray;
  .list-item-dynamic {
    display: flex;
    align-items: center;
    padding: 1em;
    border-bottom: 1px solid;
    border-color: lightgray;
  }
}
</style>